<template>
  <CloudDropdown v-model="visible">
    <CloudButton class="ant-dropdown-link" @click="(e) => e.preventDefault()">
      Hover me <CloudIcon type="down" />
    </CloudButton>
    <CloudMenu slot="overlay" @click="handleMenuClick">
      <CloudMenuItem key="1"> Clicking me will not close the menu. </CloudMenuItem>
      <CloudMenuItem key="2"> Clicking me will not close the menu also. </CloudMenuItem>
      <CloudMenuItem key="3"> Clicking me will close the menu </CloudMenuItem>
    </CloudMenu>
  </CloudDropdown>
</template>

<script>
  export default {
    title: '8.菜单隐藏方式',
    data () {
      return {
        visible: false,
      };
    },
    methods: {
      handleMenuClick (e) {
        if (e.key === '3') {
          this.visible = false;
        }
      },
    },
  };
</script>